<template>
    <el-form-item label="填充色">
        <el-color-picker v-model="localRuleOption.color" size="small"></el-color-picker>
    </el-form-item>
    <el-form-item label="填充不透明度">
        <el-input-number
            v-model="localRuleOption.fillOpacity"
            controls-position="right"
            :min="0"
            :max="1"
            :step="0.01"
            size="small"
        ></el-input-number>
    </el-form-item>
    <el-form-item label="描边颜色">
        <el-color-picker v-model="localRuleOption.outlineColor" size="small"></el-color-picker>
    </el-form-item>
    <el-form-item label="描边宽度">
        <el-input-number v-model="localRuleOption.outlineWidth" size="small"></el-input-number>
    </el-form-item>
    <el-form-item label="描边不透明度">
        <el-input-number
            v-model="localRuleOption.outlineOpacity"
            controls-position="right"
            :min="0"
            :max="1"
            :step="0.01"
            size="small"
        ></el-input-number>
    </el-form-item>
    <el-form-item v-if="localRuleOption.outlineDasharray" label="描边样式">
        <el-input-number
            v-for="(dashItem, dashIndex) in localRuleOption.outlineDasharray"
            :key="'dashIndex' + dashIndex"
            v-model="localRuleOption.outlineDasharray[dashIndex]"
            :min="0"
            :max="99"
            style="width: 80px"
            size="small"
            controls-position="right"
        />
        <el-button size="small" :icon="Plus" @click="localRuleOption.outlineDasharray.push(10)" />
        <el-button
            :icon="Minus"
            size="small"
            :disabled="localRuleOption.outlineDasharray.length === 0"
            @click="localRuleOption.outlineDasharray.splice(localRuleOption.outlineDasharray.length - 1, 1)"
        />
    </el-form-item>
</template>
<script setup lang="ts">
import { toRef, watch } from 'vue'
import { Plus, Minus } from '@element-plus/icons-vue'
import type { Symbolizer as GeoSymbolizer, FillSymbolizer } from 'geostyler-style'

type propsType = {
    geoSymbolizer: FillSymbolizer
}
const props = withDefaults(defineProps<propsType>(), {
    geoSymbolizer: () => {
        return {
            kind: 'Fill', // 规则类型
            color: '#ff0000',
            fillOpacity: 1,
            outlineColor: '',
            outlineWidth: 0,
            outlineOpacity: 1,
            outlineDasharray: [],
        }
    },
})
// 面规则
const localRuleOption = toRef(props, 'geoSymbolizer')

interface updateInnerStyleEmit {
    (e: 'updateInnerStyle', localRuleOption: GeoSymbolizer): void
}
const emit = defineEmits<updateInnerStyleEmit>()
watch(localRuleOption, () => {
    emit('updateInnerStyle', localRuleOption.value)
})
</script>
<style lang="scss" scoped></style>
